<section>
  <!-- <p class="lead">
    Defined users ({{$ctrl.jobs.length}})
    <a class="btn btn-primary pull-right" href ng-click="$ctrl.openModal('create', {})">
      <i class="fa fa-plus"></i> Add user</a>
  </p> -->

  <div class="row mv-s" ng-if="$ctrl.jobs.length === 0">
    <div class="col-md-12">
      <div class="empty-message">No jobs found.</div>
    </div>
  </div>

  <div class="row mv-s" ng-if="$ctrl.jobs.length > 0">
    <div class="col-sm-12 flex-table">
      <div class="flex-header media">
        <div class="flex-col flex-w-100 text-center">Status</div>
        <div class="flex-col flex-1">Job details</div>
        <div class="flex-col flex-w-120 text-center">TLP</div>
        <div class="flex-col flex-w-120 text-center">PAP</div>
        <div class="flex-col flex-w-100"></div>
        <div class="flex-col flex-w-100" require-roles="orgadmin,analyze"></div>
      </div>
      <div class="flex-row media" ng-repeat="job in $ctrl.jobs track by job.id"
        ng-init="isFile = job.dataType ==='file'">
        <div class="flex-col flex-w-100 vertical centered">
          <span class="label label-lg label-default" ng-class="{
            'Success': 'label-success',
            'InProgress': 'label-warning',
            'Failure': 'label-danger'}[job.status]">{{job.status}}</span>
        </div>
        <div class="flex-col flex-1">
          <h4 class="media-heading text-primary">
            <strong>[{{job.dataType}}]</strong>
            <span
              ng-if="job.type !== 'responder'">{{(isFile ? job.attachment.name : job.data) | fang | limitTo:200}}</span>
            <span ng-if="job.type === 'responder'">{{job.label || 'No Label'}}</span>
          </h4>
          <div class="row mv-xs text-muted">
            <div class="col-sm-4">
              <strong class="text-capitalized">{{ job.type }}:</strong>
              <span>{{job.analyzerName}}</span>
            </div>
            <div class="col-sm-4">
              <strong>Date:</strong>
              <span am-time-ago="job.createdAt"></span>
            </div>
            <div class="col-sm-4">
              <strong>User:</strong>
              <span>{{job.organization}}/{{job.createdBy}}</span>
            </div>
          </div>
          <div ng-if="job.status === 'Failure'" class="row text-danger wrap">
            <div class="col-sm-12">
              <a class="text-danger" href
                ng-click="job.showError = !!!job.showError">{{job.showError ? 'Hide' : 'Show'}} error</a>
              <pre ng-show="job.showError" class="error-trace">{{job.errorMessage}}</pre>
            </div>
          </div>
        </div>
        <div class="flex-col flex-w-120 text-center vertical centered">
          <tlp value="job.tlp"></tlp>
        </div>
        <div class="flex-col flex-w-120 text-center vertical centered">
          <tlp value="job.pap" namespace="PAP"></tlp>
        </div>
        <div class="flex-col flex-icon flex-w-100" ui-sref="main.job-report({id: job.id})">
          <a href class="text-primary">
            <i class="fa fa-search"></i>View</a>
        </div>
        <div class="flex-col flex-icon flex-w-100" require-roles="orgadmin,analyze" ng-click="$ctrl.deleteJob(job.id)">
          <a href class="text-danger">
            <i class="fa fa-ban"></i>Delete</a>
        </div>
      </div>
    </div>
  </div>
</section>